<template>
	<view class="content">
        <u-navbar id="navbar" bgColor="#fff" 
            :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            leftIconColor="#151C24" @leftClick="back"
            title="附件详情" titleColor="#151C24">
        </u-navbar>

        <view class="uni-area boxH" :style="{height:boxH+'px',border:'1rpx solid transparent'}">
            <u-swiper class="u-m-t-40" :height="boxH*0.8" :autoplay="false" imgMode="widthFix"
                :list="list" radius="8" :current="current" @change="change" @click="click">
            </u-swiper>
            <u-scroll-list class="u-m-t-40 u-p-b-0" :indicator="false">
                <view v-for="(item, index) in list" :key="index"
                    :class="['u-m-r-30','item','u-flex',index==current?'item-active':'']" @tap.stop="()=>current=index">
                    <u--image :showLoading="true" :src="item" width="186rpx" height="186rpx" radius="4" mode="widthFix"></u--image>
                </view>
            </u-scroll-list>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 设备信息
                systemInfo: uni.getStorageSync('systemInfo'),
                boxH: 731,
                list: [
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                ],
                current: 0,
			}
		},

        onReady(){
            uni.createSelectorQuery().in(this).select('#navbar').boundingClientRect(res => {
                this.boxH = this.systemInfo.normalContentH - res.height
            }).exec();
        },

		onLoad() {
            const data = JSON.parse(uni.getStorageSync('accessoryData'))
            // console.log('附件内容',data)
            this.list = []
            data.map((v,i)=>{
                this.list.push(v.url)
            })
		},


		methods: {
            back(){
                uni.navigateBack()
            },

            change(e){
                this.current = e.current
            },
            click(e){
                // console.log(e)
            }
		}
	}
</script>

<style lang="scss">
    .content{
        /deep/.u-swiper__wrapper__item__wrapper{
            align-content: center !important;
        }
        .item{
            width: 186rpx;
            height: 186rpx;
            border-radius: 8rpx;
            overflow: hidden;
            &:last-child{
                margin-right: 0;
            }
        }
        .item-active{
            border: 1px solid #21A5F3;
        }
    }
</style>
